<template>
	<view class="page detail bgf5" v-if="order != null">

		<scroll-view>
			<view class="head px20 py40">
				<view class="fs18 white">{{order.status}}</view>

			</view>
			<view @click="onOpenPopup" class="bgff pl18 pr10 r8 shadow flex flexC mx12 mt-20">
				<image class="location" src="/static/img/icon/local.png" mode="widthFix"></image>
				<view class="mr10 flex1 py12 ml20">
					<view class="fs16"><text class="mr12">{{address.name}}</text><text>{{address.phone}}</text></view>
					<view class="mt6 fs12">
						{{address.province}}{{address.city}}{{address.area}}{{address.detail}}
					</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="bgff p12 mt10">
				<view v-for="(item,idx) in goods" class="flex flexS py10">
					<image class="logo bgf5 r6" :src="item.image" mode="aspectFill"></image>
					<view class="flex1 mx10">
						<view class="ellipsis2 fs12">{{item.goods_name}}</view>
						<view class="mt8 fs12 c8e"></view>
					</view>
					<view class="aliR">
						<view class="">￥{{item.goods_price}}</view>
						<view class="mb40">×{{item.total_num}}</view>
						<text @click="buyAgain(item)" class="bor r40 px12 py4">再次购买</text>
					</view>
				</view>
				<view class="py16 flex flexB flexC">
					<text>商品总价</text><text class="cbd ml12">￥{{order.total_price}}</text>
				</view>
				<view class="pb16 flex flexB flexC">
					<text>运费</text><text class="cbd ml12">￥{{order.express_price}}</text>
				</view>
				<view class="p8 bgf5 r4 flex flexB flexC">
					<text>实付</text><text class="cf2 ml12">￥{{order.pay_price}}</text>
				</view>
			</view>
			<view class="bgff p12 mt10 mb48 c59 fs12">
				<view class="flex flexC">
					<text class="w-4">订单编号:</text>
					<text class="flex1">{{order.order_no}}</text>
					<text @click="copyOrder" class="bgd0 r40 px10 py2 c00">复制</text>
				</view>
				<view class="flex flexC mt14">
					<text class="w-4">创建时间:</text>
					<text class="flex1">{{order.createtime}}</text>
				</view>
				<view v-if="order.riderName != ''" class="flex flexC mt14">
					<text class="w-4">骑手姓名:</text>
					<text class="flex1">{{order.riderName}}</text>
				</view>
				<view v-if="order.riderPhone != ''" class="flex flexC mt14">
					<text class="w-4">骑手电话:</text>
					<text class="flex1">{{order.riderPhone}}</text>
				</view>
				<view v-if="order.riderName != ''" class="flex flexC mt14">
					<text class="w-4">骑手距离:</text>
					<text class="flex1">{{order.distance}}米</text>
				</view>
				<view v-if="order.riderName != ''" class="flex flexC mt14">
					<text class="w-4">费用:</text>
					<text class="flex1">￥{{order.fee}}</text>
				</view>
				<view v-if="order.kd != ''" class="flex flexC mt14">
					<text class="w-4">快递单号:</text>
					<text class="flex1">￥{{order.kd}}</text>
				</view>
				<!-- <view class="flex flexC mt14">
				<text class="w-4">返现时间:</text>
				<text class="flex1">付款后立即返现</text>
			</view> -->
				<!-- <view class="flex flexC mt14">
				<text class="w-4">预计积分:</text>
				<text class="flex1">7126</text>
			</view> -->
			</view>
			<view class="flex flexC flexJC fixed bgff py10 pl12 shadow mt40">


				<text v-if="order.status == '待收货'" class="bor r40 px12 py4 mr8" @click="confirmOrder()">确认收货</text>
				<text @click="$refs.pop.open()" v-if="order.status == '待发货' && order.wl_type != 'zt'"
					class="bor r40 px12 py4 mr8">发货</text>
				<text @click="confirmOrder" v-if="order.status == '待发货' && order.wl_type == 'zt'"
					class="bor r40 px12 py4 mr8">确认自提</text>

			</view>
		</scroll-view>

		<uni-popup ref="pop" type="bottom">
			<view class="popup-content2">
				<button class="popup-btn button" @click="clickTc">发同城</button>
				<button class="popup-btn button" @click="clickKd">发快递</button>

				<view class="popup-btn" @click="$refs.pop.close()">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNo: '',
				address: {},
				goods: [],
				order: null,
				interval: '',

			};
		},
		onLoad(option) {

			this.orderNo = option.orderNo;
			console.info(this.orderNo);

		},

		onHide() {
			clearInterval(this.interval)
		},
		onUnload() {
			clearInterval(this.interval)

		},
		onShow() {
			this.getDetail();
			var payStatus = uni.getStorageSync("payStatus");
			if (payStatus == 1) {
				var orderNo = uni.getStorageSync("orderNo");
				console.info("=========orderNo=======" + orderNo)
				uni.removeStorageSync("payStatus");
				uni.removeStorageSync("orderNo");
				this.getDetail();
			}
		},
		methods: {

			clickTc() {
				this.$refs.pop.close();

				let that = this;
				let param = {
					order_no: this.orderNo
				};
				this.$api.sendTc(param).then(res => {

					console.info(res);
					if (res.code == 1) {

						that.startClock();

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						});

					}

				})
			},

			startClock() {
				let that = this;
				this.interval = setInterval(function() {
					console.log("========每隔1秒轮询=========");
					if (that.order.riderName != "") {
						clearInterval(that.interval)
						uni.showModal({
							title: "提示",
							content: "发单成功，请注意骑手电话联系",
							showCancel: false,

							complete(res) {}

						})
						return;
					} else {
						that.getDetail();
					}
				}, 2000);
			},

			clickKd() {

				this.$refs.pop.close();
				uni.navigateTo({
					url: '../mall/sendKd?order_no=' + this.orderNo
				})
			},

			confirmOrder() {


				let that = this;
				let param = {
					order_no: this.orderNo
				};
				this.$api.onlineConfrim(param).then(res => {

					console.info(res);
					if (res.code == 1) {

						that.getDetail();

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						});

					}

				})
			},

			buyAgain(item) {


				uni.navigateTo({
					url: '../goods/detail?id=' + item.goods_id
				})
			},

			pay() {
				let that = this;
				let param = {
					order_no: this.orderNo
				};
				this.$api.payOrder(param).then(res => {

					console.info(res);
					if (res.code == 1) {


						that.orderNo = res.data.order_no;
						uni.setStorageSync("orderNo", that.orderNo)

						uni.openEmbeddedMiniProgram({
							appId: res.data.appId,
							path: res.data.path,
							success(res) {
								// 打开成功
							}
						})

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						});

					}

				})
			},



			cancel() {
				let that = this;
				let param = {
					order_no: this.orderNo
				};
				this.$api.cancelOrder(param).then(res => {

					console.info(res);
					if (res.code == 1) {
						that.getDetail();

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						});

					}

				})
			},

			copyOrder() {
				uni.setClipboardData({
					data: this.orderNo,
					success: () => {
						uni.showToast({ //提示
							title: '复制成功'
						})
					},
				})
			},




			getDetail() {
				let that = this;
				let param = {
					orderNo: this.orderNo
				};
				this.$api.onlineOrderDetail(param).then(res => {

					console.info(res);
					if (res.code == 1) {
						that.order = res.data.order;
						that.address = res.data.address;
						that.goods = res.data.goods;

					} else {

					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		.location {
			width: 80upx;
		}

		.white {
			color: #FFF;
		}

		.bgef {
			background-color: #EFEFEF;
		}

		.logo {
			width: 168upx;
			height: 168upx;
		}

		.ellipsis1 {
			width: 400upx;
		}

		.avatar {
			width: 38upx;
			height: 38upx;
		}

		.bgd0 {
			background-color: #D0D0D0;
		}

		.btn {
			width: 236upx;
			height: 72upx;
			line-height: 72upx;
		}

		.head {
			background: linear-gradient(to bottom, #FD449B, #FD449B, #FD449B);
			color: #533F26;
		}

		.mt-20 {
			position: relative;
			margin-top: -50rpx;
		}

		.fixed {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
		}

		.mb48 {
			margin-bottom: 96rpx;
		}
	}

	.popup-content2 {
		background: #FFFFFF;

		.popup-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
		}

		.button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1px solid #f5f5f5;
			background: #FFFFFF;
			font-size: 11pt;
		}

		button::after {
			border: none;
		}

		.pt20 {
			border-bottom: 20rpx solid #f5f5f5;
		}
	}
</style>